<template>
  <div class="sss">
    <input ref="poster" @change="posterChange" hidden style="height: 0 ;width: 0px" type="file"
           accept="image/jpeg, image/jpg, image/png">
    <img :id="width!==337?'poster':'poster2'" :src="poster||defaultPoster" @click="uploadPoster" alt="">
    <el-dialog width="550px" :visible.sync="isShow">
      <div class="clip">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputType="option.outputType"
          :info="true"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="width!==0?width: option.autoCropWidth"
          :autoCropHeight="height!==0?height: option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :fixed-number="fixed.length!==0?fixed: option.fixedNumber"
          :fixed="option.fixed"
          :center-box="option.centerBox"
        ></vueCropper>
      </div>
      <div style="display: flex;flex-direction: row;justify-content: center;margin-top: 5px;">
        <el-button type="primary" @click="getScreenShot">确认</el-button>
        <el-button @click="cancelScreenShot">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: "ImgClip",
  data() {
    return {
      poster: "",
      isShow: false,
      fileName: '',
      option: {
        img: "",
        outputType: 'png',
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 300,
        autoCropHeight: 181,
        fixed: true,
        fixedBox: false,
        fixedNumber: [1.657458, 1],
        centerBox: true
      }
    }
  },
  props: {
    defaultPoster: String,
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    fixed: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },

  methods: {
    uploadPoster() {
      this.$refs.poster.click()
    },
    getScreenShot() {
      this.$refs.cropper.getCropData(data => {
        this.poster = data
        const base64 = {
          base64: data,
          fileName: this.fileName
        }
        this.$emit("sendChangePoster", base64)
        this.cancelScreenShot()
        this.isShow = false
        this.$refs.poster.value = ""
        this.fileName = ''
      })
    },
    cancelScreenShot() {
      this.isShow = false
    },
    posterChange() {
      let file = this.$refs.poster.files[0]
      if (!file) {
        return;
      }
      this.fileName = file.name
      //限制文件类型
      if (file.type !== "image/jpeg" && file.type !== "image/jpg" && file.type !== "image/png") {
        this.$message({
          message: '只能上传图片文件',
          type: 'warning'
        })
        return;
      }
      //限制文件大小
      if (file.size > 2 * 1024 * 1024) {
        this.$message({
          message: '封面不能大于2MB',
          type: 'warning'
        })
        return;
      }
      let reader = new FileReader();
      reader.onload = (t) => {
        this.option.img = t.target.result
        this.isShow = true
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

<style scoped>
.clip {
  height: 300px;
  width: 500px;
}

#poster2 {
  width: 337px;
  height: 342px;
}

#poster {
  width: 300px;
  height: 181px;
}
</style>
